<script>
import * as api from "@/api/user.js"
/**
 * @当前组件的loginForm同步到父组件的变化
 */
export default {
    props: ['data'],
    mounted() {
        //开局我调用一次
         this.getCaptcha();
    },
    data(){
        return{
            //需要子传父的操作
            loginForm:{
                username:"",
                password:"",
                verification:""
            },
            srcImage:""
        }
    },
    methods:{
        submitFormLogin(forName){
               this.$emit("submitLogin",forName);
        },
        //获取验证码
        async getCaptcha(){
              let res = await api.getCaptchaApi();
              this.srcImage = res.data.img;
        }
    },
    //通过watch监听loginForm的变化
    watch:{
        loginForm:{
            handler(newVal){
               this.$emit("SyncLoginForm",newVal);
            },
            deep:true
        }
    }
}
</script>

<template>
    <div class="common">
        <el-form-item label="用户名" prop="username">
            <el-input type="text" v-model="loginForm.username" autocomplete="off" placeholder="Username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="Password"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="verification" class="captcha_father">
            <el-input v-model="loginForm.verification" maxlength="5" placeholder="Capture" class="captcha" @keydown.native.enter="submitFormLogin('loginForm')"></el-input>
            <span class="captcha-svg" v-html="srcImage"></span>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" class="btn" @click="submitFormLogin('loginForm')">登入</el-button>
        </el-form-item>
        <a href="#" @click="$emit('changeSms')">切换短信登入</a>
    </div>
</template>

<style lang="scss" scoped>
.btn {
    width: 320px;
}
.captcha {
    width: 168px;
    vertical-align: top;
    border-right: 0;

    :deep(.el-input__inner) {
        border-right: none;
        vertical-align: top;
    }
}

.captcha-svg {
    display: inline-block;
    height: 39px;
    width: 150px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #DCDFE6;
    border-radius: 0 5px 5px 0;
    border-left: none;
}

:deep(.el-input__inner) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.captcha_father {
    :deep(.el-form-item__content) {
        line-height: 0;
    }
}
 a{
    // text-decoration: none;
    color:#b0b0b0
 }
</style>
